import React from 'react'

const DeskSmall = (props) => {
  const {deskJoin, data, index} = props
  const players = []
  for (let i = 0; i < 4; i++) {
    players.push({
      headUrl: 'img/groupNew/small-header.png?v=20181201'
    })
  }
  if (!data.isEmpty) {
    data.data.players.forEach((player, index) => {
      players[index] = player
    })
  }
  const deskNames = ['small-desk-top', 'small-desk-right', 'small-desk-bottom', 'small-desk-left']
  return <div className="vh-center column small-desk-wrapper">
    {/* <img className="small-desk-desk" src="img/groupNew/small-desk.png?v=20181201" alt=""/>
    <img className="small-desk-top" src="img/groupNew/small-header.png?v=20181201" alt=""/>    
    <img className="small-desk-right" src="img/groupNew/small-header.png?v=20181201" alt=""/>    
    <img className="small-desk-bottom" src="img/groupNew/small-header.png?v=20181201" alt=""/>    
    <img className="small-desk-left" src="img/groupNew/small-header.png?v=20181201" alt=""/>  */}
    <img className="small-desk-desk" src="img/groupNew/small-desk.png?v=20181201" alt=""/>
    {
      players.map((p, i) => {
        const cn = deskNames[i]
        if (data.isEmpty) {
          return <img onClick={deskJoin} key={i} className={cn} src="img/groupNew/small-header.png?v=20181201" alt=""/> 
        } else {
          return <img onClick={deskJoin} key={i} className={cn} src={p.headUrl} alt=""/>
        }
      })
    }
    {
      !data.isEmpty && data.data.start ? <span className="desk-tip">游戏中...</span> : null
    }
  </div>
}
export default DeskSmall